<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交活动推荐</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4263eb;
            --secondary: #36b37e;
            --light-gray: #f8f9fa;
            --dark-gray: #343a40;
            --text-gray: #6c757d;
        }
        
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        
        .event-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .event-author {
            font-size: 0.85rem;
            color: var(--text-gray);
        }
        
        .event-stats {
            font-size: 0.85rem;
            color: var(--text-gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            margin-right: 1rem;
        }
        
        .stat-item i {
            margin-right: 4px;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--text-gray);
            transition: color 0.2s ease;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: #e74c3c;
        }
        
        .action-btn.saved {
            color: var(--secondary);
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .image-grid-3 {
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .image-grid-3 img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .image-container:hover .image-overlay {
            opacity: 1;
        }
        
        .text-truncate-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .text-truncate-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h2 class="mb-4">发现活动</h2>
        
        <!-- 布局1: 大图卡片式布局 -->
        <section class="mb-8">
            <h3 class="mb-3">热门推荐</h3>
            <div class="row g-4">
                <!-- 带单张图片的活动 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card event-card h-100">
                        <div class="position-relative">
                            <img src="https://picsum.photos/600/400?random=1" class="card-img-top" alt="城市马拉松活动">
                            <div class="position-absolute top-2 right-2 bg-primary text-white px-2 py-1 rounded text-sm">
                                热门
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=101" class="rounded-circle me-1" width="20" height="20">
                                    城市运动协会
                                </span>
                                <span class="text-muted small">2小时前</span>
                            </div>
                            <h5 class="card-title mb-2">2023城市马拉松挑战赛</h5>
                            <p class="card-text text-truncate-2 text-muted">
                                年度最大规模城市马拉松赛事，适合各年龄段参赛者，完成全程可获得纪念奖牌。
                            </p>
                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 2.4k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 132
                                    </div>
                                </div>
                                <div>
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的活动 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card event-card h-100">
                        <div class="image-grid image-grid-3" style="height: 200px;">
                            <img src="https://picsum.photos/600/400?random=2" class="w-100 h-100 object-cover rounded-top" alt="音乐节现场">
                            <img src="https://picsum.photos/600/400?random=3" class="w-100 h-100 object-cover" alt="音乐节表演">
                            <img src="https://picsum.photos/600/400?random=4" class="w-100 h-100 object-cover" alt="音乐节观众">
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=102" class="rounded-circle me-1" width="20" height="20">
                                    星光娱乐
                                </span>
                                <span class="text-muted small">昨天</span>
                            </div>
                            <h5 class="card-title mb-2">夏日电子音乐节</h5>
                            <p class="card-text text-truncate-2 text-muted">
                                汇集国内外知名DJ，为期三天的电子音乐盛宴，包含多个舞台和互动体验区。
                            </p>
                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 5.8k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 421
                                    </div>
                                </div>
                                <div>
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的活动 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card event-card h-100">
                        <div class="bg-light-gray p-5 d-flex align-items-center justify-content-center">
                            <i class="fas fa-book-open text-5xl text-muted"></i>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=103" class="rounded-circle me-1" width="20" height="20">
                                    读书会组织者
                                </span>
                                <span class="text-muted small">3天前</span>
                            </div>
                            <h5 class="card-title mb-2">月度文学读书会</h5>
                            <p class="card-text text-truncate-2 text-muted">
                                本月共读《人类简史》，欢迎所有文学爱好者参与讨论，现场将提供茶点。
                            </p>
                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 896
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 56
                                    </div>
                                </div>
                                <div>
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 布局2: 列表式布局 -->
        <section class="mb-8">
            <h3 class="mb-3">最新活动</h3>
            <div class="list-group">
                <!-- 带图片的列表项 -->
                <div class="list-group-item list-group-item-action event-card">
                    <div class="d-flex gap-3">
                        <div class="flex-shrink-0" style="width: 120px; height: 100px;">
                            <img src="https://picsum.photos/300/200?random=5" class="w-100 h-100 object-cover rounded" alt="艺术展览">
                        </div>
                        <div class="flex-grow-1 min-w-0">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="mb-1">现代艺术展览开幕夜</h6>
                                    <p class="text-truncate text-muted mb-1">
                                        汇集当代艺术家作品，开幕夜将有艺术家现场讲解
                                    </p>
                                </div>
                                <div class="text-end">
                                    <small class="text-muted d-block">今天 19:00</small>
                                    <div class="mt-1">
                                        <button class="action-btn like-btn">
                                            <i class="far fa-heart"></i>
                                        </button>
                                        <button class="action-btn save-btn">
                                            <i class="far fa-bookmark"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-1">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=104" class="rounded-circle me-1" width="16" height="16">
                                    城市艺术馆
                                </span>
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 1.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 87
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-bookmark"></i> 342
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的列表项 -->
                <div class="list-group-item list-group-item-action event-card">
                    <div class="d-flex gap-3">
                        <div class="flex-shrink-0" style="width: 120px; height: 100px;">
                            <div class="image-grid h-100">
                                <img src="https://picsum.photos/300/200?random=6" class="w-100 h-100 object-cover rounded-top rounded-start" alt="美食节">
                                <img src="https://picsum.photos/300/200?random=7" class="w-100 h-100 object-cover rounded-bottom rounded-start" alt="美食展示">
                                <img src="https://picsum.photos/300/200?random=8" class="w-100 h-100 object-cover rounded-top rounded-end" alt="烹饪演示">
                                <img src="https://picsum.photos/300/200?random=9" class="w-100 h-100 object-cover rounded-bottom rounded-end" alt="品尝活动">
                            </div>
                        </div>
                        <div class="flex-grow-1 min-w-0">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="mb-1">国际美食文化节</h6>
                                    <p class="text-truncate text-muted mb-1">
                                        来自20个国家的特色美食，现场烹饪表演和试吃活动
                                    </p>
                                </div>
                                <div class="text-end">
                                    <small class="text-muted d-block">周六 10:00</small>
                                    <div class="mt-1">
                                        <button class="action-btn like-btn">
                                            <i class="far fa-heart"></i>
                                        </button>
                                        <button class="action-btn save-btn">
                                            <i class="far fa-bookmark"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-1">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=105" class="rounded-circle me-1" width="16" height="16">
                                    环球美食协会
                                </span>
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 3.7k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 215
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-bookmark"></i> 987
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的列表项 -->
                <div class="list-group-item list-group-item-action event-card">
                    <div class="d-flex gap-3">
                        <div class="flex-shrink-0" style="width: 120px; height: 100px; background-color: var(--light-gray);">
                            <div class="h-100 d-flex align-items-center justify-content-center">
                                <i class="fas fa-microphone text-3xl text-muted"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 min-w-0">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="mb-1">创业者分享交流会</h6>
                                    <p class="text-truncate text-muted mb-1">
                                        成功创业者分享经验，适合初创团队和有创业想法的人参加
                                    </p>
                                </div>
                                <div class="text-end">
                                    <small class="text-muted d-block">周日 14:30</small>
                                    <div class="mt-1">
                                        <button class="action-btn like-btn">
                                            <i class="far fa-heart"></i>
                                        </button>
                                        <button class="action-btn save-btn">
                                            <i class="far fa-bookmark"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-1">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=106" class="rounded-circle me-1" width="16" height="16">
                                    青年创业联盟
                                </span>
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 1.5k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 103
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-bookmark"></i> 521
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 布局3: 大图横幅式布局 -->
        <section class="mb-8">
            <h3 class="mb-3">精选活动</h3>
            <div class="card event-card mb-4">
                <div class="row g-0">
                    <div class="col-md-6">
                        <img src="https://picsum.photos/800/600?random=10" class="h-100 w-100 object-cover" alt="慈善晚宴">
                    </div>
                    <div class="col-md-6">
                        <div class="card-body p-5">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="event-author">
                                    <img src="https://picsum.photos/30/30?random=107" class="rounded-circle me-1" width="24" height="24">
                                    公益基金会
                                </span>
                                <span class="bg-secondary text-white px-2 py-1 rounded text-sm">
                                    精选
                                </span>
                            </div>
                            <h4 class="card-title mb-3">年度慈善晚宴</h4>
                            <p class="card-text text-truncate-3 text-muted mb-4">
                                一年一度的慈善晚宴，所得款项将全部用于贫困地区教育事业。晚宴将有明星表演、慈善拍卖等环节，欢迎社会各界人士参与。
                            </p>
                            <div class="mb-4">
                                <div class="d-flex mb-2">
                                    <div class="me-4">
                                        <i class="fas fa-calendar-alt text-primary me-1"></i>
                                        <span>6月15日 18:30</span>
                                    </div>
                                    <div>
                                        <i class="fas fa-map-marker-alt text-primary me-1"></i>
                                        <span>国际会展中心</span>
                                    </div>
                                </div>
                                <div>
                                    <i class="fas fa-ticket-alt text-primary me-1"></i>
                                    <span>票价: ¥500起</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex event-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 12.5k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i> 876
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-bookmark"></i> 3.2k
                                    </div>
                                </div>
                                <div>
                                    <button class="action-btn like-btn me-2">
                                        <i class="far fa-heart"></i> <span>2.8k</span>
                                    </button>
                                    <button class="btn btn-primary">
                                        立即报名
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 布局4: 紧凑网格布局 -->
        <section>
            <h3 class="mb-3">附近活动</h3>
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
                <!-- 带图片的小卡片 -->
                <div class="col">
                    <div class="card event-card h-100">
                        <img src="https://picsum.photos/300/200?random=11" class="card-img-top" alt="公园瑜伽">
                        <div class="card-body p-3">
                            <h6 class="card-title mb-1 text-truncate">公园晨间瑜伽</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="event-author">
                                    <img src="https://picsum.photos/30/30?random=108" class="rounded-circle me-1" width="16" height="16">
                                    瑜伽教练Lisa
                                </small>
                                <div class="d-flex">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex event-stats mt-1">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 342
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 28
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的小卡片 -->
                <div class="col">
                    <div class="card event-card h-100">
                        <div class="bg-light-gray p-3 d-flex align-items-center justify-content-center" style="height: 120px;">
                            <i class="fas fa-coffee text-3xl text-muted"></i>
                        </div>
                        <div class="card-body p-3">
                            <h6 class="card-title mb-1 text-truncate">咖啡品鉴会</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="event-author">
                                    <img src="https://picsum.photos/30/30?random=109" class="rounded-circle me-1" width="16" height="16">
                                    精品咖啡馆
                                </small>
                                <div class="d-flex">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex event-stats mt-1">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 512
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 43
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的小卡片 -->
                <div class="col">
                    <div class="card event-card h-100">
                        <div class="image-grid h-120">
                            <img src="https://picsum.photos/300/200?random=12" class="w-100 h-100 object-cover rounded-top" alt="手工市集">
                            <img src="https://picsum.photos/300/200?random=13" class="w-100 h-100 object-cover" alt="手工艺品">
                        </div>
                        <div class="card-body p-3">
                            <h6 class="card-title mb-1 text-truncate">创意手工市集</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="event-author">
                                    <img src="https://picsum.photos/30/30?random=110" class="rounded-circle me-1" width="16" height="16">
                                    创意联盟
                                </small>
                                <div class="d-flex">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex event-stats mt-1">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 876
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 67
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带图片的小卡片 -->
                <div class="col">
                    <div class="card event-card h-100">
                        <img src="https://picsum.photos/300/200?random=14" class="card-img-top" alt="宠物聚会">
                        <div class="card-body p-3">
                            <h6 class="card-title mb-1 text-truncate">宠物友好聚会</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="event-author">
                                    <img src="https://picsum.photos/30/30?random=111" class="rounded-circle me-1" width="16" height="16">
                                    爱宠人士俱乐部
                                </small>
                                <div class="d-flex">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex event-stats mt-1">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i> 632
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-comment"></i> 54
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.classList.toggle('liked');
                const icon = this.querySelector('i');
                
                if (this.classList.contains('liked')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.classList.toggle('saved');
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                }
            });
        });
    </script>
</body>
</html>

